<template>
    <div id="_border">
        <div id="_content">
            <div id="_imgSrc">
                <img :src="test.imgSrc" alt="图片消失了" style="width: 200px;height: 200px">
            </div>
            <div id="_title">
                <h1>{{ test.name }}</h1>
            </div>
            <div id="_introduce">
                <p>简介:{{ test.simpleNote }}</p>
            </div>
            <div id="_difficulty">
                <p>难度:{{ test.difficulty }}&nbsp;&nbsp;学习人数:{{ test.usedNumber }}&nbsp;&nbsp;标签:{{ test.rangeType }}</p>

            </div>
            <div id="_collectBtn">
                <el-button type="primary" @click="collect()">{{ isCollect }}</el-button>
            </div>
            <div id="_a">

                <button :class="btnActiveOne" @click="changeActiveOne()">
                    靶场介绍
                </button>

                <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>

                <button :class="btnActiveTwo" @click="changeActiveTwo()">
                    过程解析
                </button>

                <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>

                <button :class="btnActiveThree" @click="changeActiveThree()">
                    问答交流
                </button>

            </div>

            <keep-alive>
                <router-view @updateTestList="initTestInfo"></router-view>
            </keep-alive>

            <sort-list id="_sort" :userList="user"></sort-list>

        </div>
    </div>
</template>

<script>
    export default {
        name: "TestDetail",
        components: {
            countDown: () => import('@/components/countDown.vue'),
            top: () => import('@/components/top.vue'),
            sortList: () => import('@/components/SortList.vue'),
        },
        data() {
            return {
                test: {
                    name: "测试",
                    imgSrc: "",
                    introduce: "一段介绍",
                    usedNumber: 0,
                    rangeType: "sql注入",
                    difficulty: "初级",
                    simpleNote: '',
                    url: '正在生成中',
                },
                btnActiveOne: "active actBtn",
                btnActiveTwo: "actBtn",
                btnActiveThree: "actBtn",
                userFlag: "",
                oldFlag: "",
                isDone: false,
                countDown: 0,
                testId: -1,
                isDelay: false,
                isCollect: "点击收藏",
                user: '',
            }
        },
        methods: {
            changeActiveTwo() {
                this.btnActiveTwo = "active actBtn";
                this.btnActiveOne = "actBtn";
                this.btnActiveThree = "actBtn";
                this.$router.push('/TestCurse')
            },
            changeActiveOne() {
                this.btnActiveOne = "active actBtn";
                this.btnActiveTwo = "actBtn";
                this.btnActiveThree = "actBtn";
                this.$router.push('/TestContent')

            },
            changeActiveThree() {
                this.btnActiveThree = "active actBtn";
                this.btnActiveOne = "actBtn";
                this.btnActiveTwo = "actBtn";
                this.$router.push('/TestAnswer')
            },

            initTestInfo() {
                this.user=this.testId;
                this.$axios.get('/testDetail/getTestDetail', {
                    params: {
                        testId: this.testId
                    }
                }).then(res => {
                    if (res.data.code === 200) {
                        let {
                            courseUrl,
                            introduce,
                            testCode,
                            testName,
                            testType,
                            usedNumber,
                            testPictureUrl,
                            difficulty,
                            simpleNote,
                            testUrl,
                            flag,
                        } = res.data.data;
                        this.testId = testCode;
                        this.test = res.data.data;
                        this.test.url = testUrl;
                        this.test.name = testName;
                        this.oldFlag = flag;
                        this.test.rangeType = testType;
                        this.test.imgSrc=testPictureUrl;
                        sessionStorage.setItem('curseImgSrc', courseUrl);
                        this.$axios.get('/collectAndTest/getUserCollect', {
                            params: {
                                testCode: this.testId
                            }
                        }).then(res => {
                            if (res.data.code === 200) {
                                this.isCollect = '取消收藏';
                            }else {
                                this.isCollect = '点击收藏';
                            }
                        })
                    }
                });
            },
            collect() {
                let data = {
                    testCode: this.testId,
                }
                this.$axios.postForm('/collectAndTest/collect', data).then(res => {
                    if (res.data.code === 200) {
                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                        this.initTestInfo();
                    } else {
                        this.$message({
                            message: '操作失败',
                            type: 'error'
                        });
                    }
                })
            },
            sortList() {

            }

        },
        created() {
            this.testId = sessionStorage.getItem('testId');
            this.initTestInfo();
            this.sortList();
        }

    }
</script>

<style scoped>
    * {
        margin: 0;
        padding: 0;
    }

    #_border {
        width: 100%;
        height: 100%;
        border: 1px solid #e2e7bf;
    }

    #_content {
        position: relative;
        top: 20px;
        left: 10%;
        right: 10%;
        width: 25%;
        height: 100%;

    }

    #_imgSrc {
        width: 200px;
        height: 200px;
        background: #e2e7bf;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
    }

    #_collectBtn {
        position: relative;
        top: -200px;
        left: 750px;
    }

    #_title, #_introduce, #_difficulty {

        width: 665px;
        position: relative;
        top: -200px;
        left: 200px;

    }

    #_title {
        font-size: 25px;
    }

    #_difficulty {
        background: #e2e7bf;
        position: relative;
        top: -134px;
    }

    #_a {
        position: relative;
        top: -120px;
        font-size: 25px;
        border: 1px solid #e2e7bf;
        padding: 2px;
        width: 860px;
    }

    .actBtn {
        background-color: white;
        border: none;
        padding: 10px 20px;
        font-size: 16px;
        color: #333;
        position: relative;
    }

    .actBtn.active::after {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background-color: #f00;
    }
    #_sort{
        position: absolute;
        top: 0px;
        left: 900px;
        width: 400px;
    }
</style>